<template>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? dataForm.arbitrationFlowName : $t('update')" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
                 label-width="120px">
            <el-form-item prop="name" label="资料文档">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        :data="dataForm"
                        :multiple="true"
                        :action="uploadUrl()"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                        :on-success="handleSuccess"
                        :headers="headers()"
                        :file-list="fileList"
                        :auto-upload="true">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器-->
<!--                    </el-button>-->
                    <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
            </el-form-item>
            <el-form-item prop="remark" :label="$t('dict.remark')">
                <el-input v-model="dataForm.remark" :placeholder="$t('dict.remark')"/>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle">{{ $t('submit') }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {debounce} from 'lodash'
    import Cookies from 'js-cookie'

    let tokenStr = Cookies.get('token');

    export default {
        data() {
            return {
                visible: false,
                inactiveValue: 0,
                activeValue: 1,
                fileList: [],
                attrs: {
                    accept: 'image/*'
                },
                dataForm: {
                    id:0,
                    arbitrationFlowName: '',
                    arbitrationId: this.arbitrationId,
                    arbitrationFlowId: this.arbitrationFlowId,
                    remark: ''
                }
            }
        },
        props:{
            arbitrationId:{
                type:Number
            },
            arbitrationFlowId:{
                type:Number
            }
        },
        computed: {

        },
        methods: {
            init:function() {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.id) {
                        this.getInfo()
                    }
                })
            },
            headers:function(){
                return{
                    'token': tokenStr
                }
            },
            uploadUrl: function () {
                return process.env.VUE_APP_API + "/file/uploadOSS"
            },
            submitUpload:function() {
                this.$refs.upload.submit();
            },
            handleRemove:function(file, fileList) {

                this.fileList = fileList;
            },
            handlePreview:function(file) {
                console.log(file);
            },
            handleChange:function(res, files){
                console.log(res.name);
                this.fileList = files;
            },
            handleSuccess:function(response, file, fileList){
                // this.$refs.upload.clearFiles();
                // this.visible = false
                file.url = file.response.data;
                this.fileList = fileList;
                // this.$emit('refreshDataList')

            },
            // 获取信息
            getInfo:function() {
                this.$axios.get(`/arbitrationFlow/info/${this.dataForm.id}`).then(res => {
                    this.dataForm = {
                        ...this.dataForm,
                        ...res
                    }
                }).catch(() => {
                })
            },
            // 表单提交
            dataFormSubmitHandle: function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    this.dataForm.fileList = this.fileList;
                    this.$http.json('/arbitrationDatum/addOrUpdate', this.dataForm).then(res => {
                        this.$message({
                            message: this.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.visible = false
                                this.$refs.upload.clearFiles();
                                this.$emit('refreshDataList')
                            }
                        })
                    }).catch(() => {
                    })
                })
            }
        }
    }
</script>
